<template>
	<view class="timer-container">
		<view class="time-info">
			<text>{{ year }}年{{ month }}月{{ day }}日 {{ week }}</text>
			<text>{{ hour }}:{{ minute }}:{{ second }}</text>
		</view>
		<view class="student-info">
			<view class="avatar-wrapper" @click="goToDetail(item)">
				<image class="avatar" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67dfcaa84db07.jpeg"
					mode="aspectFill" />
			</view>
			<view class="info-right" @click="goToDetail(item)">
				<view class="student-base">
					<view class="base-row">
						<view class="base-group">
							<view class="base-info">
								<text class="name">刘志豪</text>
								<text class="birthday-tag">15岁</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="competition-info">
			<view class="info-item">
				<u-icon name="integral-fill" size="16" color="#999" />
				<text style="font-size: 24rpx;">男子100米自由泳/ 第3组第2场</text>
			</view>
			<view class="info-item">
				<u-icon name="clock" size="16" color="#999" />
				<text style="font-size: 24rpx;">2024-03-15 14:30</text>
			</view>
			<view class="info-item">
				<u-icon name="map" size="16" color="#999" />
				<text style="font-size: 24rpx;">奥体中心游泳馆</text>
			</view>
			<view class="info-item">
				<u-icon name="checkbox-mark" size="16" color="#4CAF50" />
				<text style="font-size: 24rpx;margin-right: 20rpx;" :class="{ active: pltype == 1 }">待检录</text>
				<text style="font-size: 24rpx;" v-if="plshow">待开赛</text>
				<text style="font-size: 24rpx;" class="active" v-if="!plshow">比赛开始</text>
			</view>
		</view>

		<view class="time-display">
			<text>总时间：{{ formatTime(totalTime) }}</text>
			<!-- <text>重新计时时间：{{ formatTime(reTotalTime) }}</text> -->
		</view>
		<view class="segment-display">
			<view v-for="(item, index) in segments" :key="index">
				<text>分段 {{ index + 1 }}：{{ formatTime(item.segment) }}</text>
				<!-- <text>+{{ formatTime(item.difference) }}</text> -->
			</view>
		</view>
		<view class="button-group">
			<button @click="resetTimer" :disabled="!isPaused">重置</button>
			<button @click="toggleTimer">{{ isPaused? '继续' : '暂停' }}</button>
			<button @click="recordSegment" :disabled="isPaused">分段计时</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				year: '',
				month: '',
				day: '',
				week: '',
				hour: '',
				minute: '',
				second: '',
				totalTime: 0,
				segments: [],
				timerId: null,
				isPaused: true,
				reTotalTime: 0,
				pauseStartTime: null
			};
		},
		onLoad(options) {

		},
		mounted() {
			this.updateTime();
			setInterval(() => {
				this.updateTime();
			}, 1000);
		},
		methods: {
			updateTime() {
				const now = new Date();
				this.year = now.getFullYear();
				this.month = String(now.getMonth() + 1).padStart(2, '0');
				this.day = String(now.getDate()).padStart(2, '0');
				const dayOfWeek = now.getDay();
				switch (dayOfWeek) {
					case 0:
						this.week = '周日';
						break;
					case 1:
						this.week = '周一';
						break;
					case 2:
						this.week = '周二';
						break;
					case 3:
						this.week = '周三';
						break;
					case 4:
						this.week = '周四';
						break;
					case 5:
						this.week = '周五';
						break;
					case 6:
						this.week = '周六';
						break;
				}
				this.hour = String(now.getHours()).padStart(2, '0');
				this.minute = String(now.getMinutes()).padStart(2, '0');
				this.second = String(now.getSeconds()).padStart(2, '0');
			},
			toggleTimer() {
				this.isPaused = !this.isPaused;
				if (!this.isPaused) {
					const now = Date.now();
					if (this.pauseStartTime) {
						const pauseDuration = now - this.pauseStartTime;
						this.reTotalTime += pauseDuration;
					}
					this.timerId = setInterval(() => {
						this.totalTime += 10;
						this.reTotalTime += 10;
					}, 10);
					this.pauseStartTime = null;
				} else {
					this.pauseStartTime = Date.now();
					clearInterval(this.timerId);
				}
			},
			resetTimer() {
				clearInterval(this.timerId);
				this.totalTime = 0;
				this.segments = [];
				this.isPaused = true;
				this.reTotalTime = 0;
				this.pauseStartTime = null;
			},
			recordSegment() {
				if (!this.isPaused) {
					this.segments.push({
						segment: this.totalTime,
						difference: this.totalTime - (this.segments.length > 0 ? this.segments[this.segments
							.length - 1].segment : 0)
					});
					this.reTotalTime = 0;
				}
			},
			formatTime(milliseconds) {
				const totalSeconds = Math.floor(milliseconds / 1000);
				const hours = Math.floor(totalSeconds / 3600);
				const minutes = Math.floor((totalSeconds % 3600) / 60);
				const seconds = totalSeconds % 60;
				const ms = milliseconds % 1000;
				// return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${ms.toString().padStart(3, '0').substr(0, 2)}`;
				return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${ms.toString().padStart(3, '0').substr(0, 2)}`;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.time-info {
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.time-info text:first-child {
		font-size: 32rpx;
		color: #007AFF;
	}

	.time-info text:last-child {
		font-size: 36rpx;
		color: #007AFF;
		font-weight: 500;
	}

	.timer-container {
		text-align: center;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f1f1f1;
		padding: 20rpx;
	}

	.time-display {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.segment-display {
		// margin-bottom: 20px;
		font-size: 16px;
	}
	.button-group {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.button-group button {
		margin: 5px 0;
		padding: 10px 20px;
		width: 100%;
		
	}

	button:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.competition-info {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx 24rpx;
		margin-bottom: 24rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.info-item u-icon {
		margin-right: 16rpx;
		color: #999;
	}

	.info-item text {
		font-size: 28rpx;
		color: #666;
	}

	.active {
		color: #4CAF50 !important;
	}

	.avatar-wrapper {
		position: relative;
	}

	.gender-icon {
		position: absolute;
		top: -4rpx;
		left: -4rpx;
		background: #fff;
		border-radius: 50%;
		width: 12px;
		height: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		z-index: 1;
		font-size: 8px;
		color: var(--gender-color);
	}

	.avatar {
		width: 56rpx;
		height: 56rpx;
		border-radius: 28rpx;
		position: relative;
	}

	.info-right {
		margin-left: 20rpx;
		flex: 1;
	}

	.name-status {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.student-base {
		flex: 1;
	}

	.base-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 8rpx;
	}

	.base-row:last-child {
		margin-bottom: 0;
	}

	.course-campus {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.course-info-text {
		font-size: 13px;
		color: #666666;
	}

	.course-campus {
		margin-bottom: 8rpx;
	}

	.course-status {
		margin-bottom: 8rpx;
	}

	.merged-status-tag {
		font-size: 14px;
		color: #333333;
		background-color: #F5F5F5;
		padding: 4rpx 12rpx;
		border-radius: 4px;
		display: inline-block;
	}

	.status-tag {
		font-size: 12px;
		color: #007AFF;
		background-color: #E6F4FF;
		padding: 4rpx 12rpx;
		border-radius: 4px;
	}

	.birthday-tag {
		font-size: 11px;
		color: #666666;
		background-color: #f5f5f5;
		padding: 2rpx 6rpx;
		border-radius: 4px;
		margin-right: 8rpx;
	}

	.name {
		font-size: 14px;
		font-weight: 500;
		color: #333333;
	}

	.phone {
		font-size: 11px;
		color: #999999;
		margin: 0 8rpx;
	}

	.base-info {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-top: 4rpx;
	}

	.campus,
	.valid-until {
		font-size: 14px;
		color: #999999;

		&.expired {
			color: #ff4d4f;
		}
	}

	.course-type-tag {
		font-size: 12px;
		color: #007AFF;
		background-color: #e6f3ff;
		padding: 4rpx 12rpx;
		border-radius: 4px;
	}

	.badge-wrap {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.package-count {
		font-size: 13px;
		color: #999999;
		padding: 4rpx 12rpx;
		background-color: #E6F4FF;
		border-radius: 4px;
	}

	.student-info {
		display: flex;
		align-items: center;
		padding: 16rpx 24rpx;
		position: relative;
		background-color: #fff;
	}
</style>